<template>
    <div>
        <el-table :data="memberlist" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180"></el-table-column>
            <el-table-column prop="avatarurl" label="头像" width="300">
                <template v-slot="$prop">
                    <img height="100px" :src="$prop.row.avatarurl" alt="">
                </template>
            </el-table-column>



            <el-table-column prop="phone" label="账号" width="180"></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="180"></el-table-column>
            <el-table-column prop="sex" label="性别" width="180">
                <template v-slot="$prop">
                    {{ $prop.row.sex == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="profession" label="职业" width="180"></el-table-column>
            <el-table-column prop="addtime" label="注册时间" width="180">
                <template v-slot="$prop">
                    {{ new Date(Number($prop.row.addtime)).toLocaleDateString() + '\n' + new
                            Date(Number($prop.row.addtime)).toLocaleTimeString()
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template v-slot="$prop">
                    <el-button v-if="$prop.row.status == 1" round type="primary" size="mini" plain>正常</el-button>
                    <el-button v-else round type="warning" size="mini" plain>禁用</el-button>
                </template>

            </el-table-column>
            <el-table-column prop="status" label="操作">
                <template v-slot="$prop">
                    <el-button round type="primary" size="mini" @click="change($prop.row)" plain>编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-size="5" layout="prev, pager, next, jumper" :total="membertotal">
            </el-pagination>
        </div>

        <v-dialog :info="info" ref="son" />
    </div>
</template>


<script>
import { mapActions, mapState } from 'vuex';
import vDialog from "./dialog.vue"

export default {

    computed: {
        ...mapState("member", ["memberlist", "membertotal"])
    },
    mounted() {
        this.getmemberlist({ page: this.page, size: this.size })
        this.getmembertotal()
    },
    methods: {
        ...mapActions("member", ["getmemberlist", "getmembertotal"]),

        // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 分页
        handleCurrentChange(page) {
            this.page = page;
            this.getmemberlist({ page, size: this.size })
            this.getmembertotal()
        },
        change(obj) {
            // console.log(obj);
            this.$refs.son.refesh(obj);
            this.info.isShow = true

        }
    },
    data() {
        return {
            page: 1,
            size: 5,
            currentPage4: 1,
            info: {
                isShow: false
            }

        }
    },
    components: {
        vDialog
    },


}

</script>


<style leng='less' scoped>
.block {
    float: left;
    margin-top: 10px;
}
</style>